<template>
  <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
      <van-list  class="list-container"
        v-model="moreLoading"
        :finished="moreFinished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad">
        <van-swipe v-if="banners.length" :autoplay="3000">
          <template v-for="item in banners">
            <van-swipe-item :key="item.newsID">
              <a v-if="item.url" :href="item.url" class="banner-item" :style="{backgroundImage: `url(${item.imageUrl})`}">
                <div class="video"></div>
                <div class="title">{{item.title}}</div>
              </a>
              <router-link v-else class="banner-item" :to="{name: 'news-detail', params: {id: item.newsID}}" :style="{backgroundImage: `url(${item.imageUrl})`}">
                <div class="video"></div>
                <div class="title">{{item.title}}</div>
              </router-link>
            </van-swipe-item>
          </template>
        </van-swipe>
        <div class="list">
          <template v-for="item in list">
            <a v-if="item.url" :key="item.newsID" :href="item.url" class="item-box">
              <div class="cover-box" :style="{backgroundImage: `url(${item.imageUrl})`}">
                <div class="video"></div>
              </div>
              <div class="title"><span class="title-box">{{item.title}}</span><span class="hot"></span></div>
              <div class="views">{{item.views}}人正在观看</div>
            </a>
          </template>
        </div>
      </van-list>
    </van-pull-refresh>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
import { API_CATEGORY_NEWS } from '@/service/news'
export default {
  props: {
    cateId: {
      required: true
    }
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      pageSize: 8,
      pageNumber: 0,
      refreshLoading: false,
      moreLoading: false,
      moreFinished: false,
      list: [],
      banners: []
    }
  },
  mounted () {
    this.requestCategoryBanner()
    this.moreLoading = true
    this.requestCategoryList(resData => {
      let { list, total } = resData
      if (list.length <= 0) {
        this.moreFinished = true
      } else {
        this.pageNumber = this.pageNumber + 1
        this.list = [...this.list, ...list]
        if (total === this.list.length) {
          this.moreFinished = true
        }
      }
    }).catch(() => {
      this.moreFinished = true
    }).finally(() => {
      this.moreLoading = false
    })
  },
  methods: {
    requestCategoryList (callback) {
      let reqData = {
        catId: this.cateId,
        pageSize: this.pageSize,
        pageNumber: this.pageNumber + 1,
        isTop: 0
      }
      return API_CATEGORY_NEWS(reqData).then(resData => {
        callback && callback(resData)
      })
    },
    requestCategoryBanner () {
      let reqData = {
        catId: this.cateId,
        pageSize: 10,
        pageNumber: 1,
        isTop: 2
      }
      API_CATEGORY_NEWS(reqData).then(resData => {
        let { list } = resData
        if (list.length <= 0) {
          this.banners = []
        } else {
          this.banners = list
        }
      })
    },
    onLoad () {
      if (this.refreshLoading) {
        this.moreLoading = false
        return
      }
      this.requestCategoryList((resData) => {
        let { list, total } = resData
        if (list.length <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = [...this.list, ...list]
          if (total === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onRefresh () {
      this.pageNumber = 0
      this.requestCategoryList((resData) => {
        let { list, total } = resData
        if (list.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = list
          if (total === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      }).finally(() => {
        this.refreshLoading = false
      })
      this.requestCategoryBanner()
    }
  }
}
</script>

<style scoped lang="less">

</style>
